<template>
	<view class="select-view" v-if="isShow">
		<view class="mask" @tap="handleCancel"></view>
		<view class="content" :class="{ 'content-enter': isShow }">
			<view class="header">
				<text class="cancel" @tap="handleCancel">取消</text>
				<text class="title">{{ title }}</text>
				<text class="confirm" @tap="handleConfirm">确定</text>
			</view>
			<view class="list">
				<view v-for="(item, index) in options" :key="index" class="list-item"
					:class="{ active: selectedIndex === index }" @tap="handleSelect(index)">
					{{ item.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SelectView',
		props: {
			options: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: '请选择'
			},
			defaultIndex: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				selectedIndex: this.defaultIndex,
				isShow: false
			}
		},
		methods: {
			show() {
				this.isShow = true
			},
			handleSelect(index) {
				this.selectedIndex = index
			},
			handleCancel() {
				this.isShow = false
				this.$emit('cancel')
				this.$emit('update:isShow', false)
			},
			handleConfirm() {
				let that = this;
				this.isShow = false
				that.$emit('confirm', this.options[this.selectedIndex])
				that.$emit('update:isShow', false)
			}
		}
	}
</script>

<style>
	.select-view {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 999;
	}

	.mask {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		border-radius: 12px 12px 0 0;
		transform: translateY(100%);
		transition: transform 0.3s;
	}

	.content-enter {
		transform: translateY(0);
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
	}

	.cancel {
		color: #666;
	}

	.title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.confirm {
		color: #007aff;
	}

	.list {
		max-height: 300px;
		overflow-y: auto;
	}

	.list-item {
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
	}

	.list-item.active {
		color: #007aff;
	}
</style>